<template>
  <div class="containt">
    <nav-com
      title=""
      :showView="true"
      @back="backHandler()"
    ></nav-com>
    <div style="margin: 0 20px;margin-top: 12.5vh;color: #FFFFFF;line-height: 28px;font-size: 20px; text-align: center;">未发放岗位津贴</div>
    <div style="margin: 0 20px;margin-top: 3vh;">
      <div style="margin: 0 20px;line-height: 40px;font-weight: 600;margin-top: 10px;color: #754117;">姓名 *</div>
      <van-cell-group inset>
        <van-field
          v-model="formData.username"
          placeholder="请输入你的姓名"
        />
      </van-cell-group>
      <div style="margin: 0 20px;line-height: 40px;font-weight: 600;margin-top: 10px;color: #754117;">手机号 *</div>
      <van-cell-group inset>
        <van-field
          type="tel"
          v-model="formData.phone"
          placeholder="请输入你的手机号"
        />
      </van-cell-group>
      <div style="margin: 0 20px;line-height: 40px;font-weight: 600;margin-top: 10px;color: #754117;">岗位级别 *</div>
      <van-cell-group inset>
        <van-field
          placeholder="请选择您的岗位级别"
          v-model="formData.level"
        >
        </van-field>
      </van-cell-group>
      <div style="margin: 0 20px;line-height: 40px;font-weight: 600;margin-top: 10px;color: #754117;">未发放时长 *</div>
      <van-cell-group inset>
        <van-field
          type="number"
          v-model="formData.hour"
          placeholder="请输入未发放岗位津贴的时长"
        />
      </van-cell-group>
      <div style="margin: 0 20px;line-height: 40px;font-weight: 600;margin-top: 10px;color: #754117;">未发放金额 *</div>
      <van-cell-group inset>
        <van-field
          type="number"
          v-model="formData.pay_money"
          placeholder="请输入未发放岗位津贴的金额"
        />
      </van-cell-group>

      <div style="color:#cf751d;margin:4vw;font-weight:700">
        <p>说明:</p>
        <p>亲，您可以将金额申请转为中军值，或者转为股票权益。</p>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div
          style="width: 40vw;
          line-height: 45px;
          text-align: center;
          color: #fff;
          background: #BF6812;
          margin: auto;
          margin-top: 20px;
          border-radius: 4px;"
          @click="submit(1)"
        >转中军值</div>

        <div
          style="width: 40vw;
          line-height: 45px;
          text-align: center;
          color: #fff;
          background: #BF6812;
          margin: auto;
          margin-top: 20px;
          border-radius: 4px;"
          @click="submit(2)"
        >转股票权益</div>
      </div>
    </div>
    <van-popup
      v-model="showPipup"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :columns="goddList"
        value-key="title"
        @confirm="onConfirm"
        @cancel="showPipup = false"
      ></van-picker>
    </van-popup>

    <van-popup
      v-model="showPayType"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :columns="payType"
        @confirm="onPayTypeConfirm"
        @cancel="showPayType = false"
      ></van-picker>
    </van-popup>
    <van-popup
      v-model="showDate"
      position="bottom"
    >
      <van-datetime-picker
        v-model="formData.pay_time"
        type="datetime"
        @confirm='onConfirmDate'
        @cancel="showDate = false"
        title="选择年月日"
      />
    </van-popup>
  </div>
</template>
    
    <script>
import navCom from "@/component/nav";
import { unionAdd, getGoodTitle, applyNoAllowance } from "@/api/api.js";
import { Field, CellGroup, Picker, Icon, Toast, Calendar } from "vant";
export default {
  components: {
    navCom,
    Calendar,
  },
  data() {
    return {
      dataInfo: {},
      showPipup: false,
      showPayType: false,
      showDate: false,
      value: "",
      columns: ["3000"],
      payType: ["余额支付", "微信支付", "支付宝支付", "提货券兑换", "其他"],
      formData: {
        username: "",
        phone: "",
        level: "",
        hour: "",
        pay_money: "",
      },
      goddList: [],
    };
  },
  created() {
    this.getGoodTitle();
  },
  methods: {
    // 初始化数据
    getGoodTitle() {
      getGoodTitle()
        .then((res) => {
          console.log("getGoodTitle", res);
          this.goddList = res.data.data;
        })
        .catch((err) => {});
    },
    formatDateStr(val) {
      let str = new Date(val);
      let year = str.getFullYear();
      let month =
        str.getMonth() + 1 < 10
          ? "0" + (str.getMonth() + 1)
          : str.getMonth() + 1;
      let date = str.getDate() < 10 ? "0" + str.getDate() : str.getDate();
      let Minutes =
        str.getMinutes() < 10 ? "0" + str.getMinutes() : str.getMinutes();
      let Hours = str.getHours() < 10 ? "0" + str.getHours() : str.getHours();
      return (
        year + "-" + month + "-" + date + " " + Minutes + ":" + Hours + ":00"
      );
    },
    moneyHandler(e) {
      console.log(e.target.value);
      if (e.target.value < 3000) {
        Toast("定金金额必须≧3000");
        this.formData.money = 3000;
      }
    },
    showPipupClick() {
      console.log("showPipupClick");
      this.showPipup = true;
    },
    showPayTypeClick() {
      this.showPayType = true;
    },
    onConfirm(e) {
      console.log("onConfirm", e.title);
      this.formData.phone_model = e.title;
      this.showPipup = false;
    },
    onConfirmDate(e) {
      console.log("onConfirmDate", e);
      this.formData.pay_time = this.formatDateStr(e);
      this.showDate = false;
    },
    onPayTypeConfirm(e) {
      console.log("onPayTypeConfirm", e);
      this.formData.pay_type = e;
      console.log("onPayTypeConfirm", this.formData.pay_type);
      this.showPayType = false;
    },
    goPage(type) {
      if (type == 1) {
        this.$router.push("/toFuture");
      }
      if (type == 2) {
        this.$router.push("/togetherInvitatio");
      }
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    sendData(type) {
      let title = type == 1 ? "中军值" : "股票权益";
      applyNoAllowance({ ...this.formData, type })
        .then((res) => {
          console.log("postOrderService", res);
          // Toast(res.data.msg);
          if (res.data.code == 1) {
            this.$dialog
              .alert({
                title: `转${title}`,
                message: `您已申请将金额转化为${title}，请及时在${title}记录中查看`,
              })
              .then(() => {
                this.backHandler();
              });
          }
        })
        .catch((err) => {});
    },
    // 初始化数据
    submit(type) {
      if (!this.formData.phone) {
        Toast("请填写手机号");
        return
      } else if (!this.formData.pay_money) {
        Toast("请填写金额");
        return
      } else if (!this.formData.hour) {
        Toast("请填写时长");
        return
      } else if (!this.formData.username) {
        Toast("请填写姓名");
        return
      } else if (!this.formData.level) {
        Toast("请填写岗级");
        return
      } 
      let title = type == 1 ? "中军值" : "股票权益";
      this.$dialog
        .alert({
          title: `转${title}`,
          message: `您已确认要将金额转化为${title}？确认要转化请点击确认。`,
          showCancelButton: true,
        })
        .then(() => {
          this.sendData(type);
        });
    },
  },
};
</script>
    
  <style scoped>
.containt {
  min-height: 1050px;
  /* height: auto; */
  background: #f2f3f7;
  background-image: url("../../../assets/myOrder/applyBg.png");
  background-repeat: round;
}
.van-cell {
  background-color: rgba(207, 117, 29, 0.1) !important;
  border-radius: 10px;
  border: 1.5px solid #cf751d !important;
}
</style>
  <style scoped>
/deep/ .back_box {
  background-color: transparent !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  -webkit-box-shadow: 0px 0px 6px 0px transparent !important;
  box-shadow: 0px 0px 6px 0px transparent !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/deep/ input.van-field__control::-webkit-input-placeholder {
  color: #754218;
  font-size: 15px;
}
</style>